﻿<!DOCTYPE HTML>
<html>
<head>
<title>1. 实现伸缩二级菜单</title>
<meta charset="utf-8" />
<style>
li{ list-style:none; }
/*一级标题的初始样式*/
li span{
	padding-left: 20px;
	cursor: pointer;
	background: url("../images/add.png") no-repeat center left;
}
/*二级菜单默认隐藏*/
li ul{ 
	/* display: none;  */
	height:0;
	overflow:hidden;
	transition:all .5s linear;
}
/*定义open样式类，谁加谁就变-号*/
.open{ 
	background: url("../images/minus.png") no-repeat center left; 
}
/*谁是open旁边的ul，谁就跟着显示出来*/
.open+ul{ 
	/* display: block;  */
	/* height:108px; */
}
/*如果打开的是第1个li下的span，则它旁边的ul高变为88px*/
li:nth-child(1)>span.open+ul{
	height:88px;
}
/*如果打开的是第2个li下的span，则它旁边的ul高变为66px*/
li:nth-child(2)>span.open+ul{
	height:66px;
}
/*如果打开的是第3个li下的span，则它旁边的ul高变为110px*/
li:nth-child(3)>span.open+ul{
	height:110px;
}
</style>
</head>
<body>
	<ul class="tree">
		<li>
			<span class="open">考勤管理</span>
			<ul>
				<li>日常考勤</li>
				<li>请假申请</li>
				<li>加班/出差</li>
			</ul>
		</li>
		<li>
			<span>信息中心</span>
			<ul>
				<li>通知公告</li>
				<li>公司新闻</li>
				<li>规章制度</li>
			</ul>
		</li>
		<li>
			<span>协同办公</span>
			<ul>
				<li>公文流转</li>
				<li>文件中心</li>
				<li>内部邮件</li>
				<li>即时通信</li>
				<li>短信提醒</li>
			</ul>
		</li>
	</ul>
	<script>
		//DOM 4步
		//1. 查找触发事件的元素
		//本例中: 点击每个li中的span触发切换不同的菜单显示
		//查找class为tree的ul下的所有span元素
		var spans=document.querySelectorAll("ul.tree span");
		//2. 绑定事件处理函数
		//本例中: 因为每个span都可单击
		//遍历spans中每个span，绑定单击事件
		for(var span of spans){
			span.onclick=function(){
				//this->当前正在点击的这一个span元素
				//测试: 点哪个span，哪个span就变成❀
				//this.innerHTML="❀";
				//3. 查找要修改的元素
				//本例中: 不用查找，因为点一个span时，只要修改自己的class就行了！
				//4. 修改元素
				//本例中: 当单击一个span时，当前span应该在开关之间来回切换
				//如果当前span的class是open，说明当前span旁边的ul是开着的，那么我们只要清除span的class open，就把当前span旁边的ul关上了
				if(this.className=="open"){
					this.className="";
				}else{//否则如果当前span的class不是open，说明当前span旁边的ul是隐藏的。那么只要修改当前span的class为open，当前span旁边的ul就打开了！
					//打开自己之前，为了防止别的span也开着，应该尝试去查找另一个开着的span。（根据需求，一次只可能有一个是开着的，所以只要找一个就可以了！不用找全部！）
					var openSpan=document.querySelector("ul.tree span.open");
					//如果找到另一个开着的span，应该先把另一个开着的span关上
					if(openSpan!=null){
						openSpan.className="";
					}
					//然后再打开自己
					this.className="open";
					//结果: 肯定这一次只有当前span自己是打开的！别的span都是关上的
				}
			}
		}
	</script>
</body>
</html>
